<template>
  <div class="l-custom-tabs">
    <view class="tabs-flex">
      <template v-for="(item, index) in tabs">
        <view
          class="tabs"
          :class="item.isChecked ? 'active' : ''"
          :key="index"
          @click="changeTab(item, index)"
          >{{ item.name }}</view
        >
      </template>
    </view>
  </div>
</template>

<script>
export default {
  name: "l-custom-tabs",
  props: {
    tList:{
      type:Array,
      default: function () {
        return []
      },
    }
  },
  data() {
    return {
      tabs:[]
    };
  },
  computed: {},
  methods: {
    // 切换选中一级选项卡
    changeTab(e, index) {
      this.tabs.map((item) => {
        if (item.type == e.type) {
          item.isChecked = true;
        } else {
          item.isChecked = false;
        }
      })
      this.$emit('cusTabBack', e.type)
    },
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {
    this.tabs = this.tList
  },
};
</script>

<style lang="scss" scoped>
.l-custom-tabs{
  .tabs-flex{
    height: 86rpx;
    background: #f5f5f5;
    border-radius: 24rpx;
    box-sizing: border-box;
    margin-bottom: 15rpx;
    display: flex;
    .tabs {
      flex: 1;
      line-height: 86rpx;
      font-size: $uni-font-size-32;
      color: #242b42;
      border-radius: 24rpx;

      text-align: center;
    }
    .active {
      color: #fff;
      background-color: $uni-font-color;
      font-weight: bold;
    }
  }
}
</style>